<!--
 * @desc: 
 * @author: mao
 * @version: 1.0
 * @Date: 2023-09-01 16:35:57
-->
<template>
    <form @submit.stop.prevent="handleSearch" class="filter-type search-box">
        <p> <a-input v-model="searchText" placeholder="输入关键词" @change="changeInput"   allow-clear/></p>
        <div class="icon-box" @click="handleSearch">
            <img src="@/assets/img/search-icon.png" class="search-icon" />
        </div>
    </form>
</template>
<script lang="ts" setup>
    import { ref, watch } from "vue";
    import { getVideoFrameByTime } from "@ms/components/src/utils/videoFrame";
    import request from "@/utils/axios";
    import { message } from 'ant-design-vue'

    interface Props {
        mainType: number,
        ifCompanyAndOrgGroup ? : number,
        uperId ? : number,
        ifHadBuy ? : number,
        aiAnalysisStatus ? : number,
        ifChildMediaResource ? : number,
        ifConfirmRight ? : number,
        listType ? : number,
        column ? : number,
        start ? : string,
        end ? : string,
        ifTimeDesc ? : Boolean,
        lastId ? : any,
        status?:number,
        searchFlag?:number,
        folder_id?: string,
    };

    const searchText = ref<string>('');
    const headers = { authorization: 'authorization-text'};
    const fileList = ref<any[]>([]);

    const props = defineProps<Props>();
    
    const emit = defineEmits(['searchKeyWord', 'textContent']);

    const changeInput = (data:any) => {
        searchText.value = data.target.value;
        emit('textContent', data.target.value);
    }

    const handleSearch = () => {
        // if (searchText.value === '') {
        //     message.error('请输入搜索内容！');
        //     return;
        // }
        if(searchText.value==''){
            return;
        }
        let req = {
            key_words: searchText.value,
            query_type: 0,
            ...props,
            lastId: 0
        };
        if (props.searchFlag == 98) {
            req.lastId = props.lastId;
        }
        if(searchText.value.trim()==''){
            return;
        }
        request({
            method: 'post',
            url: '/multimodal-search-service/mediaresource/keywords',
            data: req
        }).then(res => {
            console.log(res);
            emit('searchKeyWord', res.data.result.data);
        }).catch(err => console.log(err));
    }

    watch(
        () => props.searchFlag,
        (val) => {
            if (!props.searchFlag) return;
            else if (props.searchFlag == 98) {
                handleSearch();
            } else {
                handleSearch();
            }
        },
        {
            immediate: true, 
            deep: true
        }
    );
</script>
<style lang="scss" scoped>
.search-box {
    line-height: 32px;
    position: relative;
    width: 250px;
    height: 32px;
    border: 1px solid #e5e5e5;
    outline: none;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    p {
        width: 83%;
        text-indent: 6px;
        .ant-input-affix-wrapper {
            height: 100%;
            width: 100%;
            border: 0;
            &:hover {
                border: 0;
                border-inline-end-width:0;
            }
            &.ant-input-affix-wrapper-focused {
                box-shadow: none;
            }
        }
    }
    .icon-box {
        position: absolute;
        right: 0;
        top: 0;
        background: #f9601d;
        height: 100%;
        width: 32px;
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
</style>

